<template>
	<view class="comment-box">

		<view v-if="!isReply" class="comment-header__logo">
			<!-- <image src='../../static/HomeIcon/home-active.png' mode=""></image> -->
			<image :src="item.author.avator" mode=""></image>
		</view>
		<view class=""  v-if="!isReply" style="width: 100%;">
			<view  class="comment-header">
				<view class="comment-header__info">
					<view class="comment-name"> {{item.author.author_name || '游客'}} · {{item.author.professional}}</view>
					<!-- <view class="comment-time"> {{item.author.professional}} </view> -->
				</view>
			</view>
			<view class="comment-content">
				<view class="comment-text">
					{{item.comment_content}}
				</view>
			</view>
			<view class="comment-time">
				<view class="comment-time-time">
					{{item.create_time | formatTime}} 
				</view>
				<view class="comment-time-huifu" @click="commentRepyl({item,isReply:isReply})">
					回 复
				</view>
			</view>
			<view class="comments-reply" v-for="citem in item.replys" :key="citem.comment_id">
				<comment-box  @reply="commentRepyl" :isReply="true" :item="citem"></comment-box>
			</view>
		</view>
		<view v-else class="ziComments comment-content" @click.stop="commentRepyl({item,isReply:isReply})">
			<view  class="comment-name"> {{item.author.author_name || '游客'}}<view style="color: #999;margin: 0 5px;">  回复</view>{{item.to}}: 
			</view>
			<!-- <view class="comment-content"> -->
				{{item.comment_content}}
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	import commentBox from "@/components/comment-box/comment-box.vue"
	import {parseTime} from "@/utils/date.js"
	export default {
		name:"comment-box",
		props: {
			item: {
				type: Object,
				default () {
					return {　}
				}
			},
			isReply:{
				type:Boolean,
				default:false
			}
		},
		filters:{
			formatTime(time){
				return parseTime(time)
			}
		},
		data() {
			return {

			};
		},
		methods:{
			commentRepyl(comment){
				if(comment.isReply){ // 评论的评论
					comment.item.reply_id = comment.item.comment_id
					comment.item.comment_id = this.item.comment_id
				}
				// console.log(comment,'commentcomment');
					this.$emit("reply", comment)
			}
		},
		components:{
			commentBox
		}
	}
</script>

<style scoped lang="scss">
	.comment-box {
		// margin: 40px 0;
		display: flex;
				padding: 10px;
		
		.comment-header__logo {
			flex-shrink: 0;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.comment-header {
			display: flex;
			align-items: center;

			.comment-header__info {
				display: flex;
				// flex-direction: column;
				padding-left: 5px;
				font-size: 12px;
				color: #999;
				line-height: 1;

				.comment-name {
					// margin-bottom: 10px;
					font-size: 14px;
					font-weight: bold;
					color: #333;
				}
			}
		}
		.comments-reply{
			.comment-box{
				margin: 10px 0;
				background-color: #ddd;
				border-radius: 10px;
			}
		}
		.comment-time {
			padding-left: 5px;
			font-size: 12px;
			color: #999;
			line-height: 1;
				display: flex;
				align-items: center;
			.comment-time-huifu{
				color: #333;
				background-color: #ddd;
				padding: 5px 10px;
				border-radius: 15px;
				margin-left: 10px;
			}
		}
		.ziComments{
				margin: 0!important;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			.comment-name {
				flex-shrink: 0;
				display: flex;
				// margin-bottom: 10px;
				font-size: 14px;
				font-weight: bold;
				color: #333;
			}
		}
		.comment-content {
			padding-left: 5px;
			margin: 10px 0;
			font-size: 16px;
			color: #333;
		}
	}
</style>
